* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

/*头部部分*/
#header {
    height: 1.33rem
        /* 50/37.5 */
    ;
    background: #ff841d;
    padding: .13rem
        /* 5/37.5 */
    ;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .headerLogo a img {
        height: .67rem
            /* 25/37.5 */
            /* 60/37.5 */
        ;

        margin: {
            left: .8rem
                /* 30/37.5 */
            ;
            top: .27rem
                /* 10/37.5 */
            ;
        }
    }

    .headerApp a img {
        width: 1.07rem
            /* 40/37.5 */
        ;

        margin: {
            right: .27rem
                /* 10/37.5 */
            ;
            top: .27rem
                /* 10/37.5 */
            ;
        }
    }
}

/*搜索部分*/
#search {
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .searchBox {
        padding: .27rem
            /* 10/37.5 */
        ;

        input {
            height: .53rem
                /* 20/37.5 */
            ;
            background: #f1f1f1;
            margin-left: 10px;
            border-radius: .4rem
                /* 15/37.5 */
            ;
            width: 6.67rem
                /* 250/37.5 */
            ;
            border: none;
            font: .4rem
                /* 15/37.5 */
                /.53rem
                /* 20/37.5 */
                "宋体";

            padding: {
                left: .53rem
                    /* 20/37.5 */
                ;
                top: 5px;
                bottom: 5px;
            }
        }
    }

    .searchBtn button {
        width: 1.68rem
            /* 63/37.5 */
        ;
        height: .8rem
            /* 30/37.5 */
        ;
        background: #ff841d;
        border-radius: .4rem
            /* 15/37.5 */
        ;
        margin-right: .27rem
            /* 10/37.5 */
        ;
        border: none;
        color: #fff;
        font: .4rem
            /* 15/37.5 */
            /.53rem
            /* 20/37.5 */
            "宋体";
    }
}

/* 筛选框*/
#subNav {
    overflow: hidden;
    background-image: linear-gradient(to bottom, #fff, #ccc);

    a {
        color: #666;
        display: inline-block;
        height: 1.07rem
            /* 40/37.5 */
        ;
        line-height: 1.07rem
            /* 40/37.5 */
        ;
        text-align: center;
    }

    >a:nth-child(1) {
        padding-left: .27rem
            /* 10/37.5 */
        ;
    }

    >a:nth-last-child(1) {
        float: right;
        margin-right: .27rem
            /* 10/37.5 */
        ;
        background-image: linear-gradient(to top, #fff, #ccc);
        width: 1.6rem
            /* 60/37.5 */
        ;
        height: .8rem
            /* 30/37.5 */
        ;
        text-align: center;
        line-height: .8rem
            /* 30/37.5 */
        ;
        margin-top: 5px;
        color: black;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
}

 /*详情主体内容*/
 #main{
    width: 10rem /* 375/37.5 */;
    .goods{
        width: 9.47rem /* 355/37.5 */;
        padding: .27rem .27rem 0 .27rem;
        border-bottom: .05rem solid #ccc;
        .pic{
            
            height: 3.73rem /* 140/37.5 */;
            // height: 4.27rem /* 160/37.5 */;
            overflow: hidden;
            text-align: center;
            padding: .27rem /* 10/37.5 */ 0;
            position: relative;
            img{
                width: 4.53rem /* 170/37.5 */;
                height: 4.48rem /* 168/37.5 */;
                margin: 0 auto;
            }
        }
        .title{
            width: 9.47rem /* 355/37.5 */;
            height: 1.36rem /* 51/37.5 */;
            font-size: .48rem /* 18/37.5 */;
            margin: .27rem 0;
            color: #333;
        }
        .count{
            width: 9.47rem;
            height: .48rem /* 18/37.5 */;
            .row{
                display: flex;
                justify-content: space-between;
                font-size: .35rem;
                color: #333;
                
                .left{
                    width: 5.12rem;
                    padding: 0 .4rem;
                }
                .right{
                    width: 5.12rem;
                    padding: 0 .4rem;
                }
            }
        }
        .price{
            width: 100%;
            height: 1.33rem;
            a{
                color: black;
            }
        }
    }
    
    .comment{
        width: 10rem /* 375/37.5 */;
        padding: .27rem 0;
        h4{
            height: .91rem /* 34/37.5 */;
            line-height: .91rem;
            font-size: .48rem;
            text-align: center;
            background: #dbdbdbdb;
            margin-bottom: .27rem;
            font-weight: 500;
        }
        .content{ 
            width: 10rem /* 375/37.5 */;
            margin: .13rem 0;
            font-size: .35rem;
            color: #333;
            .content-box{
                border-bottom: .03rem solid #ccc;
                .up{
                    padding: 0 .27rem;
                    display: flex;
                    justify-content: space-between;
                }
                .comContent{
                    padding: .27rem;
                }
                .comFrom{
                    padding-right: .27rem;
                    padding-bottom: .27rem;
                    text-align: right;
                }
            }   
        }
    }
}




/*查看更多评论*/
#moreMessage {
    background: #F4F4F4;
    height: 1.33rem
        /* 50/37.5 */
    ;
    padding: .27rem
        /* 10/37.5 */
    ;

    a {
        display: block;
        font: .35rem
            /* 13/37.5 */
            /.8rem
            /* 30/37.5 */
            "";
        text-align: center;
        border-radius: .13rem
            /* 5/37.5 */
        ;
        border: 1px solid #ddd;
        background: #F9F9F9;
        color: grey;
        margin: .27rem
            /* 10/37.5 */
            0;
    }
}

/*底部*/
#footer {
    .footerTop {
        background-color: #ff9000;
        height: .93rem
            /* 35/37.5 */
        ;
        padding-left: .27rem
            /* 10/37.5 */
        ;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: .27rem
            /* 10/37.5 */
        ;

        span {
            text-align: center;
            font-size: .53rem
                /* 20/37.5 */
            ;
            line-height: .93rem
                /* 35/37.5 */
            ;
            color: #fff;
            font-weight: bolder;
        }

        a img {
            height: .53rem
                /* 20/37.5 */
            ;

            padding : {
                right: .27rem
                    /* 10/37.5 */
                ;
            }
        }
    }

    .footerBottom {
        .footerBottomT {
            display: flex;
            justify-content: space-between;

            a {
                border: 1px solid grey;
                text-align: center;
                height: .88rem
                    /* 33/37.5 */
                ;
                font: .37rem
                    /* 14/37.5 */
                    / .8rem
                    /* 30/37.5 */
                    "";
                color: grey;
                padding: .13rem
                    /* 5/37.5 */
                ;
            }

            >a:nth-of-type(1) {
                flex-grow: 1;
                border-right: none;
            }

            >a:nth-of-type(2) {
                flex-grow: 1;
            }

            >a:nth-of-type(3) {
                flex-grow: 1;
                border-left: none;
            }
        }

        .footerBottomB {
            height: 2.67rem
                /* 100/37.5 */
            ;

            .footerBottomB-1 {
                display: flex;
                font: .37rem
                    /* 14/37.5 */
                    / .8rem
                    /* 30/37.5 */
                    "";
                color: grey;
                padding: .27rem
                    /* 10/37.5 */
                    1.33rem
                    /* 50/37.5 */
                ;

                a {
                    color: grey;
                    margin-right: .13rem
                        /* 5/37.5 */
                    ;
                }
            }

            .footerBottomB-2 {
                text-align: center;
                font: .37rem
                    /* 14/37.5 */
                    / .37rem
                    /* 14/37.5 */
                    "";
                color: black;
            }
        }
    }
}